<template>
    <div id="app">
        <div class="container">
            <div class="header">
                <span class="title">GoEasy VUE示例</span>
                <span class="description">Hello World</span>
            </div>
            <div class="send-box">
                <input v-model="content"/>
                <span @click="sendMessage">发送</span>
            </div>
            <div class="message-container">
                <div class="message-content">
                    <div class="message-text" v-for="(message, key) in messages" :key="key">{{message}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

  <script>
    export default {
        name: 'App',
        data() {
            return {
                messages: [],
                content: ""
            }
        },
        beforeMount() {
            let self = this;

            //连接GoEasy
            this.goEasy.connect({
              data:{},
                onProgress: function(attempts){
                    console.log("GoEasy is connecting", attempts);
                },
                onSuccess: function(){
                    console.log("GoEasy connect successfully.")
                },
                onFailed: function(error){
                    console.log("Failed to connect GoEasy, code:"+error.code+ ",error:"+error.content);
                }
            });

            //接收消息
            this.pubsub.subscribe({
                channel: "my_channel",
                onMessage: function (message) {
                    self.unshiftMessage(message.content);
                },
                onSuccess: function () {
                    self.unshiftMessage('订阅成功.');
                },
                onFailed: function (error) {
                    self.unshiftMessage("订阅失败，错误编码："+error.code+" 错误信息："+error.content);
                }
            });
        },
        methods: {
            sendMessage: function () {//发送消息
                let self = this;
                if (this.content.trim() != '') {
                    //发送消息
                    this.pubsub.publish({
                        channel: "my_channel",
                        message: this.content,
                        onSuccess: function () {
                            self.content = "";
                            console.log("send message success");
                        },
                        onFailed: function (error) {
                            self.unshiftMessage("消息发送失败，错误编码："+error.code+" 错误信息："+error.content);
                        }
                    });
                }
            },
            unshiftMessage(content) {
                let formattedTime = new Date().formatDate("hh:mm");
                let message = formattedTime + " " + content;
                this.messages.unshift(message);
            },
        }
    }
</script>

<style>
    .header {
        display: flex;
        flex-direction: column;
        align-items: center;
        color: #D02129;
    }

    .header .description {
        font-weight: bold;
    }

    .send-box {
        display: flex;
        align-items: center;
    }

    .send-box input {
        background: #EFEFEF;
        border: 1px solid #C8C7CC;
        flex-grow: 1;
        outline: none;
        box-sizing: border-box;
    }

    .send-box span {
        color: #D02129;
        text-align: right;
    }

    .message-container {
        display: flex;
    }

    .message-content {
        background-color: #FFFFFF;
        border: 0.01rem solid #DADADA;
        flex: 1;
    }
    @media screen and (min-width:1000px) {
        #app{
            width: 375px;
            height: 667px;
            margin: 0 auto;
            border: 1px solid red;
            padding: 10px;
            box-sizing: border-box;
        }
        .header {
            margin-top: 54px;
        }

        .header .title {
            height: 25px;
            line-height: 25px;
            font-size: 24px;
        }

        .header .description {
            height: 25px;
            line-height: 25px;
            font-size: 28px;
            margin-top: 15px;
        }

        .send-box {
            height: 40px;
            margin-top: 32px;
            margin-bottom: 32px;
        }

        .send-box input {
            border-radius: 6px;
            padding: 8px;
            font-size: 12px;
        }

        .send-box span {
            margin-left: 9px;
            font-size: 15px;
            height: 40px;
            line-height: 40px;
            width: 40px;
        }

        .message-container {
            min-height: 300px;
        }
        .message-text {
            padding: 4px 11px;
            font-size: 12px;
        }
    }
    @media screen and (max-width:1000px) {
        .header {
            margin-top: 0.54rem;
        }

        .header .title {
            height: 0.25rem;
            line-height: 0.25rem;
            font-size: 0.24rem;
        }

        .header .description {
            height: 0.25rem;
            line-height: 0.25rem;
            font-size: 0.28rem;
            margin-top: 0.15rem;
        }

        .send-box {
            height: 0.4rem;
            margin-top: 0.32rem;
            margin-bottom: 0.32rem;
        }

        .send-box input {
            border-radius: 0.06rem;
            padding: 0.08rem;
            font-size: 0.12rem;
        }

        .send-box span {
            margin-left: 0.09rem;
            font-size: 0.15rem;
            height: 0.4rem;
            line-height: 0.4rem;
            width: 0.4rem;
        }

        .message-container {
            min-height: 3rem;
        }
        .message-text {
            padding: 0.04rem 0.11rem;
            font-size: 0.12rem;
        }
    }

</style>
